package com.bawei.composeui2207a.day01

import android.util.Log
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

/**
 * 作者：赵亮
 * 时间：2024/12/10 16:47
 * 功能：输入框
 */
@Composable
fun Page5() {

    // 用户名 状态变量
    var name by remember {
        mutableStateOf("")
    }

    var password by remember {
        mutableStateOf("")
    }

    // 记住密码复选框
    var rePassword by remember {
        mutableStateOf(true)
    }

    var text by remember {
        mutableStateOf("")
    }

    Column(modifier = Modifier.padding(start = 20.dp, end = 20.dp, top = 50.dp)) {
        Text(text = name)
        // 用户名输入框
        TextField(
            modifier = Modifier.fillMaxWidth(),
            value = name,
            onValueChange = { name = it },
            label = { Text(text = "用户名") },                         // 标签
            placeholder = { Text(text = "请输入用户名") },
            leadingIcon = { Icon(imageVector = Icons.Default.Edit, contentDescription = null) },
            trailingIcon = { Icon(imageVector = Icons.Default.Email, contentDescription = null) }
        )
        // 密码输入框
        OutlinedTextField(
            modifier = Modifier.fillMaxWidth(),
            value = password,
            onValueChange = { password = it },
            label = { Text(text = "密码") },
            visualTransformation = PasswordVisualTransformation(),
            placeholder = { Text(text = "请输入密码") },
            leadingIcon = { Icon(imageVector = Icons.Default.Lock, contentDescription = null) },
            trailingIcon = { Icon(modifier = Modifier.clickable {
                Log.i("TAG", "Page5: 图片点击")
            }, imageVector = Icons.Default.Search, contentDescription = null) }
        )

        // 最基本的输入框
        BasicTextField(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .border(width = 2.dp, color = Color.Black, shape = RoundedCornerShape(15.dp)),
            value = text,
            onValueChange = { text = it },
        )

        Row (verticalAlignment = Alignment.CenterVertically){
            Checkbox(checked = rePassword, onCheckedChange = {
                rePassword = it
            })
            Text(text = "记住密码")
        }

    }
}

@Preview(showSystemUi = true)
@Composable
fun Page5Preview() {
    Page5()
}

